---
title: Introduction
icon: "custom/microsoft"
description: Bring your Microsoft Agent Framework agents to your users with CopilotKit via AG-UI.
hideHeader: true
hideTOC: true
---
import { FaMicrosoft } from "react-icons/fa";
import { FrameworkOverview } from "@/components/content/landing-pages/framework-overview";

<FrameworkOverview
  frameworkName="Microsoft Agent Framework"
  frameworkIcon={<FaMicrosoft className="h-10 w-10 text-primary" />}
  header="Bring your Microsoft Agent Framework agents to your users"
  subheader="Give your Microsoft Agent Framework agents real user-interactivity using CopilotKit and AG-UI. Build rich, interactive, agent-powered applications."
  bannerVideo="https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/overview.mp4"
  guideLink="/microsoft-agent-framework/quickstart"
  initCommand="npx copilotkit@latest create -f microsoft-agent-framework-dotnet"
  featuresLink="https://feature-viewer.copilotkit.ai/microsoft-agent-framework-dotnet/feature"
  supportedFeatures={[
    {
      title: "Generative UI",
      description: "Render your agent's state, progress, outputs, and tool calls with custom UI components in real-time. Bridges the gap between AI agents and user interfaces.",
      documentationLink: "/microsoft-agent-framework/generative-ui",
      demoLink: "https://feature-viewer.copilotkit.ai/microsoft-agent-framework-dotnet/feature/backend_tool_rendering",
      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/haiku.mp4"
    },
    {
      title: "Human in the Loop",
      description: "Empower users to guide agents at key checkpoints. Combine the best of AI and human judgment for more reliable and controllable agent behavior.",
      documentationLink: "/microsoft-agent-framework/human-in-the-loop",
      demoLink: "https://feature-viewer.copilotkit.ai",
      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/human-in-the-loop-example.mp4"
    },
    {
      title: "Shared State",
      description: "Keep your agent and your app in sync. Your agent can see everything in your app, and your app can react to your agent in real-time.",
      documentationLink: "/microsoft-agent-framework/shared-state",
      demoLink: "https://feature-viewer.copilotkit.ai",
      videoUrl: "https://cdn.copilotkit.ai/docs/copilotkit/videos/coagents/shared-state.mp4"
    }
  ]}
  architectureImage="https://cdn.copilotkit.ai/docs/copilotkit/images/microsoft-agent-framework/maf-ag-ui.png"
  liveDemos={[
    {
      type: "feature-viewer",
      title: "Feature Viewer",
      description: "Explore all of the capabilities of the Microsoft Agent Framework combined with CopilotKit.",
      iframeUrl: "https://feature-viewer.copilotkit.ai/microsoft-agent-framework-dotnet/feature/agentic_chat"
    },
  ]}
  tutorialLink="/microsoft-agent-framework/quickstart"
/>

## Resources

- [Agent Framework User Guide](https://learn.microsoft.com/en-us/agent-framework/user-guide/overview)
- [Agent Framework Tutorials](https://learn.microsoft.com/en-us/agent-framework/tutorials/overview)
